<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import {
  ElOption,
  ElUpload,
  ElIcon,
  ElButton,
  type UploadProps,
  type UploadRequestOptions
} from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject,
  getFileMd5,
  checkServerFileMD5,
  bigFileUploader
} from './utils'
import { Plus } from '@element-plus/icons-vue'
import SparkMD5 from 'spark-md5'
import axios from 'axios'
export const oUploadSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  action: {
    type: String
  },
  httpRequest: {
    type: Function
  },
  bigUpload: {
    type: Boolean,
    default: false
  },
  processCallback: {
    type: Function
  },
  ...IgnoreProps
}
export const oUploadProps = {
  ...ElUpload.props,
  ...oUploadSelfProps
}
export type oUploadPropsType = ExtractPropTypes<typeof oUploadProps>
const oUpload = defineComponent({
  name: 'one-Upload',
  props: oUploadProps,
  // inheritAttrs: false,
  components: { ElUpload, Plus, ElIcon, ElButton },
  setup(props: oUploadPropsType, context) {
    const handlePreview: UploadProps['onPreview'] = file => {
      console.log(file)
    }

    const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
      console.log(uploadFile, uploadFiles)
    }

    const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
      console.log(uploadFile, uploadFiles)
    }

    const inProps = merge(
      {
        onPreview: handlePreview,
        onRemove: handleRemove,
        onChange: handleChange
      },
      omitSelfProps<oUploadPropsType, typeof oUploadSelfProps>(
        props,
        oUploadSelfProps
      )
    )

    inProps.action = props.action
    if (props.httpRequest) {
      inProps.httpRequest = props.httpRequest
    } else {
      inProps.httpRequest = async function (options: UploadRequestOptions) {
        if (props.bigUpload) {
          // 分片
          // 断点续传
          // 秒传
          // 后端定期清理碎片
          // 进度条
          // 流程控制器
          bigFileUploader(options.file, props.processCallback)
        } else {
          const formData = new FormData()
          formData.append('file', options.file)
          await axios.post('/api/upload', formData)
          props.processCallback?.(1, 1)
        }
      }
    }

    let slots = {
      tip: () => <div class="el-upload__tip">大文件上传支持超出4G</div>
    } as SimpleKeyValueObject
    if (props.slots === false) {
      slots = {}
    }

    return () => (
      <ElUpload
        {...inProps}
        list-type="picture"
        class={oUpload.name}
        v-model={props.formData![props.prop!]}
        v-slots={slots}
      >
        <ElButton size="small" type="primary">
          选择文件
        </ElButton>
      </ElUpload>
    )
  }
})
export default oUpload
</script>
<style lang="scss" scoped>
.el-upload__tip {
  line-height: initial;
}
</style>
